<template>
<div>
    <div class="g-hc" v-if="!uploadFlag">
        <div class="m-tab">
            <span :class="index===0?'active':''" @click="tabMenu(0)">输入身份证号码</span>
            <span :class="index===1?'active':''" @click="tabMenu(1)">上传身份证照片</span>
        </div>
        <div class="p10">
            <form v-if="index===0">
                <div class="form-group">
                    <label for="">姓名</label>
                    <input type="text" v-model="form.name" class="form-control" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="">身份证号</label>
                    <input type="text" v-model="form.idNumber"  class="form-control" placeholder="请输入身份证号">
                    
                </div>
                <div class="form-group">
                    <label for="">民族</label>
                    <!-- <input type="text" v-model="form.nation"  class="form-control" placeholder="请输入民族"> -->
                    <select class="form-control" v-model="form.nation">
                        <option v-for="item in pickerData" :key="item.id" :value="item.id">{{item.name}}</option>
                    </select>
                </div>
                 <div class="form-group">
                    <label for="">详细地址</label>
                    <input type="text" v-model="form.address" class="form-control" placeholder="请输入详细地址">
                </div>
                 <div class="form-group">
                    <label for="">手机号码</label>
                    <input type="text" v-model="form.phone1" class="form-control" placeholder="填写接收通知的号码">
                </div>
                <button type="button" class="btn btn-primary" @click="cards">完成注册</button>
                <div style="text-align:center;padding:10px;">
                <a :href="listUrl">已有健康卡，一键快速关联</a>
                </div>
            </form>
            <div v-if="index===1">
                <div class="m-id" @click="addIdImage">
                    <img src="../assets/id.jpg" alt="">
                    <div class="j-upd">
                        点击上传身份证人像面
                    </div>
                </div>
                <dl class="m-demand">
                    <dt>拍摄要求</dt>
                    <dd>1、垂直拍摄，证件边框完整。</dd>
                    <dd>2、避免证件反光，模糊。</dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 选择图片成功后 -->
    <div class="g-idWrap" v-else>
        <div class="m-id" @click="addIdImage">
            <img :src="idImg" alt="">
            <div class="j-reupd">
                点击上传身份证人像面
            </div>
        </div>
        <ul class="list-group">
            <li class="list-group-item">
                <span class="u-label">姓名</span>
                <span class="u-val name" v-if="editName"><input type="text" v-model="form.name" class="form-control" placeholder="请输入姓名"><i class="yesIco" @click="confirmName"></i></span>
                <span class="u-val" v-else>{{form.name}}<i class="edtIco" @click="editname"></i></span>
            </li>
            <li class="list-group-item">
                <span class="u-label">性别</span>
                <span class="u-val">{{form.gender}}</span>
            </li>
            <li class="list-group-item">
                <span class="u-label">民族</span> 
                <span class="u-val">{{form.nation}}</span>               
            </li>
            <li class="list-group-item">
                <span class="u-label">身份证号</span>
                <span class="u-val">{{form.idNumber}}</span>
            </li>
            <li class="list-group-item">
                <span class="u-label">身份证详情地址</span>
                <span class="u-val">{{form.address}}</span>
            </li>
            <li class="list-group-item">
                <span class="u-label">手机号码</span>
                <span class="u-val name" v-if="editName"><input type="text" v-model="form.phone1" class="form-control" placeholder="填写接收通知的号码"></span>
            </li>
        </ul>  
        <button type="button" class="btn btn-primary" @click="cards">完成注册</button>
        
    </div>
</div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
    data() {
        return {
            editName:true,
            index:0,
            idImg:'',
            uploadFlag:false,
            listUrl: 'https://health.tengmed.com/open/getHealthCardList?redirect_uri=' + encodeURIComponent('http://wx.lfhospital.net/yygh/user/wxCard/wx/oneKeyRegister'),
            form:{
                name:'', //傅梦婷
                nation:'', //汉
                idNumber:'', //330681199310255729
                wechatCode:'', //9B2516908C6ED0DFB6AA9F4C14D45627
                gender:'', //女
                birthday:'', //1993-10-25
                idType:'01', //01
                relation:'0', //0
                address:'',//浙江省绍兴市
                phone1:'', //13501390734
                phone2:''
                
            },
            pickerData: [
                {
                    id: '01',
                    name: '汉族'
                },
                {
                    id: '02',
                    name: '蒙古族'
                },
                {
                    id: '03',
                    name: '回族'
                },
                {
                    id: '04',
                    name: '藏族'
                },
                {
                    id: '05',
                    name: '维吾尔族'
                },
                {
                    id: '06',
                    name: '苗族'
                },
                {
                    id: '07',
                    name: '彝族'
                },
                {
                    id: '08',
                    name: '壮族'
                },
                {
                    id: '09',
                    name: '布依族'
                },
                {
                    id: '10',
                    name: '朝鲜族'
                },
                {
                    id: '11',
                    name: '满族'
                },
                {
                    id: '12',
                    name: '侗族'
                },
                {
                    id: '13',
                    name: '瑶族'
                },
                {
                    id: '14',
                    name: '白族'
                },
                {
                    id: '15',
                    name: '土家族'
                },
                {
                    id: '16',
                    name: '哈尼族'
                },
                {
                    id: '17',
                    name: '哈萨克族'
                },
                {
                    id: '18',
                    name: '傣族'
                },
                {
                    id: '19',
                    name: '黎族'
                },
                {
                    id: '20',
                    name: '傈僳族'
                },
                {
                    id: '21',
                    name: '佤族'
                },
                {
                    id: '22',
                    name: '畲族'
                },
                {
                    id: '23',
                    name: '高山族'
                },
                {
                    id: '24',
                    name: '拉祜族'
                },
                {
                    id: '25',
                    name: '水族'
                },
                {
                    id: '26',
                    name: '东乡族'
                },
                {
                    id: '27',
                    name: '纳西族'
                },
                {
                    id: '28',
                    name: '景颇族'
                },
                {
                    id: '29',
                    name: '柯尔克孜族'
                },
                {
                    id: '30',
                    name: '土族'
                },
                {
                    id: '31',
                    name: '达斡尔族'
                },
                {
                    id: '32',
                    name: '仫佬族'
                },
                {
                    id: '33',
                    name: '羌族'
                },
                {
                    id: '34',
                    name: '布朗族'
                },
                {
                    id: '35',
                    name: '撒拉族'
                },
                {
                    id: '36',
                    name: '毛难族'
                },
                {
                    id: '37',
                    name: '仡佬族'
                },
                {
                    id: '38',
                    name: '锡伯族'
                },
                {
                    id: '39',
                    name: '阿昌族'
                },
                {
                    id: '40',
                    name: '普米族'
                },
                {
                    id: '41',
                    name: '塔吉克族'
                },
                {
                    id: '42',
                    name: '怒族'
                },
                {
                    id: '43',
                    name: '乌孜别克族'
                },
                {
                    id: '44',
                    name: '俄罗斯族'
                },
                {
                    id: '45',
                    name: '鄂温克族'
                },
                {
                    id: '46',
                    name: '崩龙族'
                },
                {
                    id: '47',
                    name: '保安族'
                },
                {
                    id: '48',
                    name: '裕固族'
                },
                {
                    id: '49',
                    name: '京族'
                },
                {
                    id: '50',
                    name: '塔塔尔族'
                },
                {
                    id: '51',
                    name: '独龙族'
                },
                {
                    id: '52',
                    name: '鄂伦春族'
                },
                {
                    id: '53',
                    name: '赫哲族'
                },
                {
                    id: '54',
                    name: '门巴族'
                },
                {
                    id: '55',
                    name: '珞巴族'
                },
                {
                    id: '56',
                    name: '基诺族'
                }
            ]
        }
    },
    created(){
        var localUrl = location.href.split('#')[0];
        var wchatCode = localUrl.split('wechatCode=')[1];
        console.log(wchatCode)
        // alert(111)
        // alert(wchatCode)
        this.form.wechatCode = wchatCode
        console.log(wx)
        this.$api.querySdk(location.href.split('#')[0]).then(res=>{
            if(res.status === 200) {
                // console.log('wxa7994d122e3ef074',res.data.timestamp,res.data.nonceStr,res.data.signature)
                wx.config({
                    debug: false, // 是否开启调试模式
                    appId: "wxa7994d122e3ef074", // 必填，公众号的唯一标识
                    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                    signature: res.data.signature, // 必填，签名，见附录1
                    jsApiList: [
                    "chooseImage",
                    "previewImage",
                    "uploadImage",
                    ] 
                })
            }
        })
        //步骤四：通过ready接口处理成功验证
    },
    methods:{
        tabMenu(index){
            this.index=index
        },
        addIdImage: function () {
            // let self = this;
            const _this=this
            wx.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function(resp) {
                    wx.getLocalImgData({
                        localId: resp.localIds[0],
                        success: function(res) {
                            _this.uploadFlag = true
                            _this.idImg = "data:image/jpg;base64,"+res.localData //resp.localIds[0]
                            var param = {}
                            param.imageContent = res.localData
                            _this.$api.getOrc(param).then( res=> {
                                console.log(res)
                                _this.form.address = res.data.rsp.cardInfo.address
                                _this.form.name = res.data.rsp.cardInfo.name
                                _this.form.gender = res.data.rsp.cardInfo.gender
                                _this.form.nation = res.data.rsp.cardInfo.nation
                                _this.form.birthday = res.data.rsp.cardInfo.birth
                                _this.form.idNumber = res.data.rsp.cardInfo.id
                            })
                        //    console.log(res)
                        }
                    });
                }
            })
           
        },
        cards(){
            let reqParam = this.form
            // let phone = this.from.phone1
            // if(phone == '') {
            //     alert('请输入手机号码')
            //     return
            // }
            this.$api.cards(reqParam).then(res=>{ //调用后台接口创建卡
                console.error(res)
                if(res.data.commonOut.resultCode === 0) {
                    this.$router.push({name:'mycard'})
                }else{
                    alert(res.data.commonOut.errMsg)
                }
            })
        },
        editname(){
            this.editName=true
        },
        confirmName(){
            this.editName=false
        },
        confirmHandler(){

        }
    }
}
</script>
<style scoped>
.g-hc{
    overflow: hidden;
}
.btn{
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.m-tab{
    height: 48px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.m-tab >>> span{
    height: 48px;
    line-height: 48px;
    font-weight: 700;
    position: relative;
}
.m-tab >>> span.active::after{
    content:'';
    width: 100%;
    position: absolute;
    height:2px;
    background-color: #337ab7;
    bottom: 0;
    left: 0;
}
.p10{
    padding: 10px;
}
.m-id{
    position: relative;
}
.m-id >>> img{
    display: block;
    width: 100%;
    height: auto;
}
.j-upd{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    padding-top: 60px;
    color: #fff;
    white-space: nowrap;
    background:url('') center 10px no-repeat;
    background-size: 40px 40px;
}
.m-demand dt{
    padding:10px 0;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}
.m-demand dd{
    padding: 8px 0 0 0;
}
.edtIco{
    background:url('') left top no-repeat;
    background-size: contain;
    padding-left: 16px;
    margin-left: 8px;
}
.yesIco{
    background: url('') left top no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
    margin-left: 8px;
}

.j-reupd{
    position: absolute;
    bottom: 0;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    height: 32px;
    line-height: 32px;
    width: 100%;
    text-align: center;
    background-color: rgba(51, 122, 183, 0.5);
}
.g-idWrap{
    padding: 10px;
}
.list-group .list-group-item{
    border-style:none none solid none;
    margin-bottom: 0;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list-group >>> .u-label{
    flex-shrink: 0;
    padding-right: 10px;
    font-weight: 700;
}
.list-group >>> .u-val{
    word-break: break-word;
}
.list-group >>> .u-val.name{
    display: flex;
    align-items: center;
}
.show-more{
      width: 200px;
      height: 30px;
      border-radius: 20px;
      text-align: center;
      display:table;
    }
.show-more a{
    display:table-cell; 
    vertical-align:middle;
}
</style>